<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>MPEG-5 Part 2 LCEVC example</title>

    <script class="code" src="../../dist/modern/umd/dash.all.debug.js"></script>

    <!-- MPEG-5 LCEVC Decoder Library -->
    <script src="https://unpkg.com/lcevc_dec.js@latest/dist/lcevc_dec.min.js"></script>

    <!-- Control bar -->
    <script class="code" src="../../contrib/akamai/controlbar/ControlBar.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">
    <link rel="stylesheet" href="../../contrib/akamai/controlbar/controlbar.css">


    <style>
        video {
            display: none !important; /* Enhanced frames are rendered on a HTML5CanvasElement.*/
        }

        .dash-video-player {
            position: relative; /* This position relative is needed to position the menus */
            margin: 0 auto;
            line-height: 1.0;
        }
    </style>

    <script class="code">
        /**
         * MPEG-5 LCEVC Integration for Dash.js Player.
         *
         * These are the changes needed for passing the correct data to lcevc_dec.js.
        */
        dashjs.Extensions = {
            ...dashjs.Extensions,
            /**
             * Attaches LCEVC functionality and methods to the provided Dash.js player instance.
             *
             * @param {object} player the Dash.js player instance to attach LCEVC
             */
            useLcevc: function useLcevc(player) {
                if (!player) {
                    throw new TypeError('The provided Dash.js player instance was null or undefined.');
                }
                const { LCEVCdec } = window;
                if (!LCEVCdec) {
                    throw new TypeError('LCEVC Decoder Libraries could not be loaded.');
                }

                player.attachLcevc = function attachLcevc(media, canvas, LCEVCdecConfig) {
                    player.LCEVCdec = new LCEVCdec.LCEVCdec(
                        media,
                        canvas,
                        LCEVCdecConfig
                    );
                };
                /* Let the LCEVC Decoder Library make the decision as to when to switch, based on the currently rendered frame.
                    If disabled, the player needs to signal LCEVC when there is a render change after an ABR switch happens.
                */
                const ENABLE_AUTO_RENDER_MODE = 1;

                /* Intercept source buffers and pass video data to LCEVC */
                player.on(dashjs.MediaPlayer.events.FRAGMENT_LOADING_COMPLETED, (event) => {
                    if (player.LCEVCdec && event.mediaType === 'video') {
                        player.LCEVCdec.appendBuffer(event.response, 'video', event.request.representation.index);
                        player.LCEVCdec.setLevelSwitching(event.request.representation.index, ENABLE_AUTO_RENDER_MODE);
                    }
                });

            }
        };
        function init() {
            var video,
                canvas,
                player,
                url = 'https://d3mfda3gpj3dw1.cloudfront.net/vn9s0p86SVbJorX6/master.mpd';

            video = document.querySelector('video');
            canvas = document.querySelector('canvas');
            player = dashjs.MediaPlayer().create();

            /* Configuration for LCEVC Decoder */
            const LCEVCdecConfig = {};
            LCEVCdec.ready.then(() => {
                /* Attach LCEVC to the Dash.js player instance */
                dashjs.Extensions.useLcevc(player);
                player.attachLcevc(video, canvas, LCEVCdecConfig);
                player.initialize(video, url, false);
                var controlbar = new ControlBar(player);
                controlbar.initialize();
            });
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-4">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>MPEG-5 Part 2 LCEVC Decoding with SEI carriage</h3>
                    <p>This example illustrates how MPEG-5 LCEVC-enhanced streams can be decoded in dash.js.
                        In this implementation, enhancements are carried as Supplemental Enhancement Information
                        within the same track as the base video. The base frames are decoded by the HTML5 Video
                        Tag, with the LCEVC Decoder libraries processing the enhancement and rendering it to
                        an HTML5 Canvas element. This example is a debug test stream, which will show moving
                        squares when the LCEVC enhancement is being decoded and displayed successfully.
                    </p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="dash-video-player code">
                    <div class="videoContainer" id="videoContainer">
                        <video preload="auto" autoplay></video>
                        <canvas></canvas>
                        <div id="videoController" class="video-controller unselectable">
                            <div id="playPauseBtn" class="btn-play-pause" title="Play/Pause">
                                <span id="iconPlayPause" class="icon-play"></span>
                            </div>
                            <span id="videoTime" class="time-display">00:00:00</span>
                            <div id="fullscreenBtn" class="btn-fullscreen control-icon-layout" title="Fullscreen">
                                <span class="icon-fullscreen-enter"></span>
                            </div>
                            <div id="bitrateListBtn" class="control-icon-layout" title="Bitrate List">
                                <span class="icon-bitrate"></span>
                            </div>
                            <input type="range" id="volumebar" class="volumebar" value="1" min="0" max="1" step=".01"/>
                            <div id="muteBtn" class="btn-mute control-icon-layout" title="Mute">
                                <span id="iconMute" class="icon-mute-off"></span>
                            </div>
                            <div id="trackSwitchBtn" class="control-icon-layout" title="A/V Tracks">
                                <span class="icon-tracks"></span>
                            </div>
                            <div id="captionBtn" class="btn-caption control-icon-layout" title="Closed Caption">
                                <span class="icon-caption"></span>
                            </div>
                            <span id="videoDuration" class="duration-display">00:00:00</span>
                            <div class="seekContainer">
                                <div id="seekbar" class="seekbar seekbar-complete">
                                    <div id="seekbar-buffer" class="seekbar seekbar-buffer"></div>
                                    <div id="seekbar-play" class="seekbar seekbar-play"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>